<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css 使用2</title>
    <style>
     
      .weight > p {
        color: red;
      }
      /* 后面添加的优先级更高（权重一样的情况下） */
      .cascade >.weight > p {
        color: blue;
      }
      #special  {
        color: green;
      }
      /* 继承：子元素会继承父元素的样式 */
      .inherit  {
        color: skyblue;
      }



      /* 权重：!important > 内联样式 > ID选择器 > 类、属性、伪类选择器 > 标签选择器 */
      /* 继承：子元素会继承父元素的样式,仅继承文字类型属性（如：大小，颜色等） */
      /* 特殊性：ID选择器 > 类、属性、伪类选择器 > 标签选择器 */

    </style>
  </head>
  <body>
    <div>
      <p>1. 层叠： 权重 继承 特殊性</p>
      <p>2. 样式： 字体 颜色 大小 背景 边框 定位 浮动</p>
      <p>3. 选择器： 标签 类名 伪类 伪元素 通配符</p>
    </div>
    <div class="cascade">
      层叠：
      <div class="weight">
        <p style="color: red;">权重</p>

        <p>继承</p>
        <p id="special">特殊性
          一般不会用id选择器来写样式
        </p>
      </div>
      <div class="inherit">
        父级
        <p>子级</p>
        <div><span>孙级</span></div>
      </div>
      
    </div>
  </body>
</html>
